<template>
  <div class="app-container">
    <el-card>
      <div class="table-layout">
        <el-descriptions :title="$t('优惠券使用统计')" direction="vertical" :column="14" border>
          <el-descriptions-item :label="$t('发放数量')">{{ rowData.pullNumber==0?$t('不限量'):rowData.pullNumber }}</el-descriptions-item>
          <el-descriptions-item :label="$t('领取数量')">{{ rowData.receivingNumber }}</el-descriptions-item>
          <el-descriptions-item :label="$t('使用数量')">{{ rowData.useNum }}</el-descriptions-item>
          <el-descriptions-item :label="$t('过期数量')">{{ rowData.expireNum }}</el-descriptions-item>
          <el-descriptions-item :label="$t('用券订单总额')"> {{
              rowData.orderTotalActual
            }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('总优惠金额')"> {{ rowData.orderTotalDiscount }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <br/>

    <el-date-picker size="mini" v-model="listQuery.startTime" class="filter-item"
                    :editable="false" :clearable="false" :placeholder="$t('Start_time')" format="yyyy - MM - dd "
                    value-format="yyyy-MM-dd"></el-date-picker>

    <el-date-picker size="mini" v-model="listQuery.endTime" class="filter-item" :editable="false"
                    :clearable="false" :placeholder="$t('End_time')" format="yyyy - MM - dd "
                    value-format="yyyy-MM-dd"></el-date-picker>

    <el-select size="mini" v-model="listQuery.shopId" clearable class="filter-item" :placeholder="$t('请选择门店')">
      <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>
    </el-select>

    <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="getList">{{ $t('Search') }}</el-button>
    <br/>

    <el-card>
      <el-table
        v-loading="loading"
        :data="list"
        border
        style="width: 100%">
        <el-table-column width="60" :label="$t('序号')" type="index">
        </el-table-column>
        <el-table-column prop="strategyName" :label="$t('策略名称')" width="180">
        </el-table-column>
        <el-table-column prop="couponName" :label="$t('优惠券名称')" width="180">
        </el-table-column>

        <el-table-column prop="userName" :label="$t('用户名称')" width="180">
        </el-table-column>
        <el-table-column align="center" property="aim" :label="$t('发放时间')" width="150">
          <template slot-scope="scope">
            {{ scope.row.addTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" property="aim" :label="$t('有效期')" width="150">
          <template slot-scope="scope">
            {{ scope.row.startTime+"-"+scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" property="aim" :label="$t('使用时间')" width="150">
          <template slot-scope="scope">
            {{ scope.row.useTime }}
          </template>
        </el-table-column>
        <el-table-column prop="shopName" :label="$t('门店名称')" width="180">
        </el-table-column>
        <el-table-column prop="orderTotalActual" :label="$t('用券订单金额')" width="180">
            <template slot-scope="scope">
            ${{ scope.row.orderTotalActual }}
          </template>
        </el-table-column>
        <el-table-column prop="orderTotalDiscount" :label="$t('总优惠金额')" width="180">
            <template slot-scope="scope">
            ${{ scope.row.orderTotalDiscount }}
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getList"/>
    </el-card>
  </div>
</template>

<script>
import {allForPerm} from '../../api/shop'
import Pagination from '@/components/Pagination'
import {strategyCouponStatisticDetail} from '../../api/couponUser'

export default {
  name: "couponStatisticDetail",
  components: {Pagination},
  data() {
    return {
      rowData:undefined,
      loading: false,
      shops: [],
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        userName:'',
        couponName:'',
        strategyId:undefined,
        startTime: undefined,
        endTime: undefined,
        shopId: undefined
      },
    }
  },
  created() {
    // 在组件创建时获取路由参数
    this.rowData = this.$route.query.row;
    allForPerm().then(response => {
      this.shops = response.data.data.list
    })
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.listQuery.strategyId = this.rowData.id
      strategyCouponStatisticDetail(this.listQuery).then(res => {
        this.list = res.data.data.list
        this.total = res.data.data.total
        this.loading = false
      })
      .catch(() => {
        this.list = []
        this.total = 0
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
